<template>
    <div id="comment_content">        
        <div class="comment_content">
            <div class="a">
                <div class="com_title lf">
                    <span class="time">{{formattime(commentIds.create_time)}}</span>
                </div>
                <div class="com_header">
                    <p class="content">{{commentIds.content}}</p>
                    <div class="thumbs_up gt">
                    <span class="against">
                        <img src="../assets/icon_thumb_down.png">
                        <span class="badhand">{{commentIds.against}}</span>
                    </span>
                    <span class="vote">
                        <img src="../assets/icon_thumb_up.png">
                        <span class="goodhand">{{commentIds.vote}}</span>
                    </span>
                    <span class="reply">
                        <img src="../assets/icon_comment.png">
                    </span>
                    </div>
                    <div v-show="replyShow" class="clearfix">
                        <textarea class="replyBox" placeholder="请输入回复内容" v-model="replyValue"></textarea>
                        <div class="replyBtn gt">
                            <button type="button" class="rep" v-show="havenLogin">发表</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 评论盖楼 -->
            <div id="commentList" v-if="isOpen">
                <!-- 循环commentIdsList来显示每条评论具体的盖楼评论id -->
                <div v-for="commentIds in levelIds" class="body" :key="commentIds">
                <!-- 使用组件，并传递参数 -->
                <!-- commentItem每个楼层具体的评论内容 -->
                <!-- 嵌套的评论id关系 -->
                <!-- 通过level来控制递归的次数 -->
                <box v-bind:commentItem="levelComments" v-bind:commentIds="commentIds" v-bind:level="commentIds.split(',').length"/>
                </div>
            </div>
            <div class="level">
                <div class="levelBtn" @click="open(commentIds.commentId)" v-show="zhankai">
                    展开<img src="../assets/icon_arrow_down_color.png">
                </div>
                <div class="levelBtn" @click="open()" v-show="!zhankai">
                    收起<img src="../assets/icon_arrow_up_color.png">
                </div>        
            </div>
            <div class="com_footer">
                <router-link :to="{path:'/articleDetail',query:{newsId:commentIds.articleId._id}}">
                来自：{{commentIds.articleId.title}}
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
import { getComment,commentLevel } from '../api/example.js';
import commentBox from './my_commentLevel'
import box from './box'
import moment from "moment";
import InfiniteLoading from "vue-infinite-loading";
export default {
    components:{
        box
    },
  name:'comment_content',
  // 通过props来接收父组件传递过来的参数，名字与父组件中一致，接收到的参数可像data中的变量一样使用
  props: [ "commentIds"],
  data(){
      return{
        page:1,
        // commentIdsList: [],
        // comment_counts:'',

            isOpen:false,
            replyValue:'',
            replyShow:false,
            havenLogin:true,
            zhankai:true,

            levelIds:[],
            levelComments:{},
      }
  },
  methods:{
        formattime(time) {
            return moment(time).format("YYYY-MM-DD HH:mm:ss");
        },
        open(commentId){
            this.zhankai = !this.zhankai;
            this.isOpen = !this.isOpen;
            console.log(this.isOpen)
            commentLevel(commentId).then(res =>{
                if(res.data.code==='success'){
                    console.log(res.data);
                    var arr = new Array();                    
                    this.levelComments=res.data.data.comments;
                    arr.push( res.data.data.commentIds);
                    this.levelIds = arr
                    console.log(this.levelIds);                    
                }else{
                    console.log(res.data)
                }
            })
        },
  }
}
</script>
<style scoped>
    .comment_content{
        border-bottom:1px solid #DCDCDC;
        padding:21.5px 0 31.8px 0;
    }
    .comment_content .time{
        font-size: 14px;
        color: #6F6F6F;
    }
    .com_title {
        width: 94%;
    }
    .com_msg,
    .com_content {
        width: 88%;
    }
    .com_header {
        margin-left: 0;
        width: 98%;
    }
    .com_footer{
        font-size: 14px;
        color: #6F6F6F;
    }
    .content {
        display: inline-block;
        margin: 10px 0;
        width: 50%;
        font-size: 16px;
        color: #333333;
    }
    .thumbs_up {
        margin-top: 10px;
        font-size: 14px;
        color: #6f6f6f;
    }
    .thumbs_up img {
        width: 25px;
        height: 25px;
        cursor: pointer;
    }
    .thumbs_up span {
    margin-left: 22px;
    }
    .thumbs_up .goodhand,
    .thumbs_up .badhand {
        color: #6f6f6f;
        margin-left: 6px;
    }
    .com_header .replyBox,.comment-info .replyBox{
        display: block;
        width:90%;
        height:114px;
        background: #FCFCFC;
        border: 1px solid #979797;
        margin: 13.5px auto 0;
        resize:none;
        padding:20px 17px;
        font-size: 14px;
        color: #9B9B9B;
    }
    .replyBtn .rep{
        margin-top: 15px;
        width:110px;
        height:36px;
        line-height: 36px;
        text-align: center;
        background: #FF8000;
        font-size: 16px;
        color: #FFFFFF;
        border:none;
    }
    .hiddenDiv{
        width:835px;
        background: #F3F3F3;
        padding:42.1px 9px 9.5px;
        margin: 38.7px auto 23.5px;
    }
    .levelBtn{
        margin: 20px 0 28px;
        font-size: 16px;
        color: #FF8000;
        cursor: pointer;
    }
    .levelBtn img{
        display: inline-block;
        width:18px;
        height:9.6px;
        margin-left: 9px;
        vertical-align: baseline;
    }
</style>
